import React,{Component,PropTypes} from 'react';
import Todo from './Todo';

export default class TodoList extends Component {
	constructor(props){
		super(props)
		this.handlerClick =this.handlerClick.bind(this);
	}
	render(){

		const onClick=this.handlerClick;
		
		var todos= this.props.todos.map(function(todo,index){

					return (<Todo  {...todo} 
						key={index} 
						onClick={(event)=>onClick(event,index)} />)
			})
		return (<ul className="list-group">
			{todos}
		</ul>)
		//return (<li>ff</li>)
	}

	handlerClick(event,index){
		event.preventDefault();
		console.log(event);
		this.props.onTodoClick(index);
	}
}
TodoList.propTypes = {

	onTodoClick:PropTypes.func.isRequired,
	todos:PropTypes.arrayOf(PropTypes.shape({
		text:PropTypes.string.isRequired,
		completed:PropTypes.bool.isRequired
	}).isRequired).isRequired
}